<template>
  <el-header>
    <header>
      <div class="l-content">
        <el-button plain icon="el-icon-menu" size="mini" @click="collapseMenu"></el-button>
        <el-breadcrumb separator="/" style="margin-bottom:0;">
          <el-breadcrumb-item @click="navHome" style="color:#ffffff;">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            :to="current.path"
            v-if="current"
            style="color:#FFF;"
          >{{ current.label }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="r-content">
        <el-dropdown trigger="click" size="mini">
          <span class="el-dropdown-link">
            <img :src="userImg" class="user" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="updatePasword">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
  </el-header>
</template>
 
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      current: (state) => state.tab.currentMenu,
    }),
  },
  data() {
    return {
      userImg: require("../assets/image/logo.png"),
    };
  },
  methods: {
    updatePasword() {
      console.log(1231);
      this.$emit("changePassword");
    },
    navHome() {
      this.$router.push({ name: "home" });
    },
    collapseMenu() {
      this.$store.commit("collapseMenu");
    },
    logout() {
      // 清空保存的 token 信息
      window.sessionStorage.removeItem("token");
      // 强制跳转到登录页面
      this.$router.push("/login");
    },
    // logOut() {
    //   this.$store.commit('clearToken')
    //   this.$store.commit('clearMenu')
    //   location.reload()
    // }
  },
};
</script>

<style lang="less" scoped>
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1.4rem;
  box-sizing: border-box;
}
.l-content {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 20px;
  }
}
.r-content {
  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>

